<template>
  <div v-title data-title="ForFun Find Yourself">
    <el-container>
      <el-main class="me-articles">
        <article-scroll-page @post_total="getnumber"></article-scroll-page>
      </el-main>

      <el-aside>
        <card-me class="me-area"></card-me>
        <card-tag :tags="hotTags"></card-tag>
        <card-article
          cardHeader="最热文章"
          :articles="hotArticles"
        ></card-article>
        <card-archive cardHeader="文章归档" :archives="archives"></card-archive>
        <card-article
          cardHeader="最新文章"
          :articles="newArticles"
        ></card-article>
      </el-aside>
    </el-container>

    <h4 style="text-align:center;color:#5fb878">文章总数:{{ number }}</h4>
  </div>
</template>

<script>
import ArticleScrollPage from "@/views/ArticleScrollPage";
import CardArticle from "@/components/card/CardArticle";
import CardMe from "@/components/card/CardMe";
import CardTag from "@/components/card/CardTag";
import CardArchive from "@/components/card/CardArchive";

import { getHotArtices, getNewArtices } from "@/api/blog";
import { getHotTags } from "@/api/blog";
import { listArchives } from "@/api/blog";

export default {
  name: "Index",
  data() {
    return {
      hotTags: [],
      hotArticles: [],
      newArticles: [],
      archives: [],
      number: 0,
    };
  },
  components: {
    CardArticle,
    CardMe,
    CardTag,
    ArticleScrollPage,
    CardArchive,
  },
  methods: {
    getHotArtices() {
      let that = this;
      getHotArtices()
        .then((resp) => {
          that.hotArticles = resp.result;
        })
        .catch((error) => {
          if (error !== "error") {
            that.$message({
              type: "error",
              message: "最热文章加载失败!",
              showClose: true,
            });
          }
        });
    },
    getNewArtices() {
      let that = this;
      getNewArtices()
        .then((resp) => {
          that.newArticles = resp.result;
        })
        .catch((error) => {
          if (error !== "error") {
            that.$message({
              type: "error",
              message: "最新文章加载失败!",
              showClose: true,
            });
          }
        });
    },

    getHotTags() {
      let that = this;
      getHotTags()
        .then((resp) => {
          that.hotTags = resp.result;
        })
        .catch((error) => {
          if (error !== "error") {
            that.$message({
              type: "error",
              message: "最热标签加载失败!",
              showClose: true,
            });
          }
        });
    },
    listArchives() {
      const that = this;
      listArchives()
        .then((resp) => {
          this.archives = resp.result;
        })
        .catch((error) => {
          if (error !== "error") {
            that.$message({
              type: "error",
              message: "文章归档加载失败!",
              showClose: true,
            });
          }
        });
    },

    getnumber(number) {
      this.number = number;
    },
  },
  created() {
    this.getHotArtices();
    this.getNewArtices();
    this.getHotTags();
    this.listArchives();
  },
};
</script>

<style scoped>
.el-container {
  width: 960px;
}

.el-aside {
  margin-left: 20px;
  width: 260px;
}

.el-main {
  padding: 0px;
  line-height: 16px;
}

.el-card {
  border-radius: 0;
}

.el-card:not(:first-child) {
  margin-top: 20px;
}
</style>
